<template>
  <div class="header">
    <van-icon class="index" name="wap-home-o" size="28" @click="toIndex" />
    <div class="zhidemai">值得买</div>
    <van-icon class="searchicon" name="search" size="28" @click="toSearch" />
    <van-icon name="cart-o" size="28" @click="toShopCart" />

  </div>
  <div class="swiper-all">
    <div class="swiper-title">
      <img class="t-small" src="https://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png" alt="">
      <div class="u-text">严选好物&nbsp;用心生活</div>
      <img class="t-big" src="	https://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView" alt="">
    </div>
    <van-swipe class="swiperb" :loop="false" :width="89">
      <van-swipe-item v-for="(item, index) in setResData" :key="item.id">
        <div class="swiper-main">
          <div class="swiper-it" v-for="(nav, index) in item" :key="nav.id">
            <img class="swiper-img" :src="nav.picUrl" alt="">
            <div>
              <div class="swiper-text">{{ nav.mainTitle }}</div>
              <div class="swiper-text-two">{{ nav.viceTitle }}</div>
            </div>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>

  <!-- <div v-masonry="containerId" transition-duration="0.3s" item-selector=".item">
    <div v-masonry-tile class="item" v-for="(item, index) in blocks">
    </div>
</div> -->

  <div class="pubu-all">
    <div class="pubu-right" v-masonry item-selector=".right-one">
      <div class="right-one" v-masonry-tile v-for="(item, index) in setpubuallData" :key="index">
        <img class="right-img" :src="item.picUrl" alt="">
        <img class="zanting" src="../../../public/u=2051882953,2999333916&fm=253&fmt=auto&app=138&f=JPEG.webp"  alt="" v-if="item.lookPics?true:false">
        <span class="right-span">{{ item.title }}</span>
        <div class="pubu-bottom">
          <div class="right-bot">
            <img class="bot-img" :src="item.avatar" alt="">
            <span class="bot-span">{{ item.nickname }}</span>
          </div>
          <div class="left-bot">
            <img class="left-bot-img" src="../../../public/5097bc5f2e1eb15f2a32b56895db073a.png" alt="">
            <span class="left-bot-span">{{ item.readCount }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { NavBar, Swipe, SwipeItem } from 'vant';
import { defineComponent } from 'vue';
import { VueMasonryPlugin } from 'vue-masonry';
export default defineComponent({
  name: 'worth',
  components: {
    [NavBar.name]: NavBar,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
  },
})

</script>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router'
import { useWorthStore } from '@/stores/worth'
// 引入storeToRefs
import { storeToRefs } from 'pinia';
// 调用仓库
const Worthstore = useWorthStore()
const { setResData } = storeToRefs(Worthstore)
const { setpubuallData } = storeToRefs(Worthstore)
const num = ref<number>(1)
const router = useRouter()
onMounted(() => {
  Worthstore.getResData(),
    Worthstore.getpubuData(num.value,1)
  window.addEventListener('scroll', handleScroll, true)
})
const toIndex = () => {
  router.push('/')
}
const toShopCart = () => {
  router.push('/shopCard')
}
const toSearch = () => {
  router.push('/search')
}

const handleScroll = () => {
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  let windowHeight = document.documentElement.clientHeight || document.body.clientHeight
  let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
  if (scrollTop + windowHeight > scrollHeight - 100) {
    num.value += 1
    Worthstore.getpubuData(num.value, 1)
  }
}
</script>

<style lang="less" scoped>
.header {
  position: sticky;
  top: 0;
  z-index: 99;
  height: 45px;
  padding: 0 13px;
  display: flex;
  justify-content: space-between;
  background-color: white;
  padding-top: 10px
}

.zhidemai {
  font-size: 18px;
  position: relative;
  left: 48px;
  color: black;
}

.searchicon {
  position: relative;
  left: 55px;
}

.swiper-all {
  width: 375px;
  height: 342px;
}

.swiper-title {
  width: 375px;
  height: 263px;
}

.t-small {
  position: absolute;
  width: 65px;
  height: 35px;
  top: 70px;
  left: 3px;
}

.u-text {
  font-size: 15px;
  line-height: 15px;
  position: absolute;
  font-family: PingFangSC-Regular;
  left: 72px;
  top: 83px;
  color: #fff;
}

.t-big {
  width: 375px;
  height: 259px;
}

.swiperb {
  width: 355px;
  height: 270px;
  border-radius: 10px;
  position: relative;
  bottom: 200px;
  left: 10px;
  background-color: #fff;
}

.swiper-main {
  width: 90px;
  height: 235px;
  margin-top: 10px;
}

.swipwe-it {
  width: 84px;
  height: 100px;
  margin-bottom: 5px;
}

.swiper-img {
  width: 60px;
  height: 60px;
  padding-left: 12px;
}

.swiper-text {
  font-weight: 20px;
  font-size: 15px;
  width: 84px;
  height: 20px;
  white-space: nowrap;
  overflow: hidden;
  color: #333;
  text-align: center;
  line-height: 20px;
}

.swiper-text-two {
  width: 84px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 10px;
  color: #999;
  text-align: center;
  height: 15px;
  line-height: 15px;
  white-space: nowrap;
  overflow: hidden;
}

:deep(.van-swipe__indicator) {
  width: 18px;
  height: 2px;
  background: #d7d1d1;
  margin: 0;
}

:deep(.van-swipe__indicator--active) {
  background-color: red;
}

:deep(.van-swipe__indicator:nth-child(5)) {
  display: none;
}

:deep(.van-swipe__indicator:nth-child(6)) {
  display: none;
}

:deep(.van-swipe__indicator:nth-child(7)) {
  display: none;
}

.pubu-all {
  background-color: #eeeeee;

  .pubu-right {
    display: flex;
    flex-wrap: wrap;

    .right-one {
      background-color: white;
      display: flex;
      flex-direction: column;
      width: 173px;
      margin-left: 10px;
      margin-bottom: 8px;
      border-radius: 10px;

      .right-img {
        position: relative;
        background-color: blanchedalmond;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
      }

      .right-span {
        margin-left: 5px;
        font-size: 15px;
        margin-top: 10px;
        margin-bottom: 8px;
        color: black;
      }

      .pubu-bottom {
        display: flex;
        width: 172px;
        height: 45px;
        flex-direction: row;

        .right-bot {
          width: 76px;
          height: 24px;
          display: flex;
          margin-right: 10px;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
          flex-direction: row;
          justify-content: right;
        }

        .bot-img {
          width: 24px;
          height: 24px;
          border-radius: 49px;
        }

        .bot-span {
          font-size: 5px;
          line-height: 24px;
        }

        .left-bot {
          width: 50px;
          height: 24px;
          display: flex;
          flex-direction: row;
          justify-content: left;
          line-height: 24px;

          .left-bot-img {
            padding-top: 4px;
            width: 16px;
            height: 16px;
            margin-left: 30px;
          }

          .left-bot-span {
            font-size: 5px;
          }
        }
      }
    }
  }
}
.zanting {
 width: 30px;
 height: 30px;
 position: absolute;
 top: 30%;
 left: 43%;
 border-radius: 50%;

}
</style>
